

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
    <style>
       .box{
        height: 500px;
        width: 500px;
        line-height: 500px;
        background-color: #ccc;
        color: #fff;
        font-size: 100px;
        text-align: center;
       }

    </style>
</head>
<body>
    
    <div class="box"></div>
    <script src="./js/lodash.min.js"></script>
    <script>

        // 手写防抖函数
        //利用setTimeout延时器实现：
        // ①：声明一个定时器变量 
        // ②:  当鼠标每次滑动都先判断是否有定时器了，如果有定时器先清除以前的定时器
        // ③：如果没有定时器则开启定时器，记得存到变量里面
        // ④：在定时器里面调用要执行的函数


        let box = document.querySelector(".box")

        let i = 1;
        function mouseMove() {
            box.innerHTML = i++;
        }

        // _.debounce()  防抖方法
        


        box.addEventListener("mousemove",_.debounce(mouseMove,1000))





    </script>
</body>
</html>